<script setup lang="ts">
import { reactify } from "@vueuse/shared";
import { ref, reactive } from "vue";
import { useRouter, RouterLink } from "vue-router";
import { description } from "../api/descriptionList.js";
import { submit } from "../api/submit.js";
let primary = ref(false);
let btu_primary = () => {
  primary.value = true;
};
let quxiao = () => {
  primary.value = false;
};
let detail = reactive({ value: {} });
const router = useRouter();
let id = router.currentRoute.value.query.id;
description(id).then((res: any) => {
  detail.value = res;
});
let tijiao = () => {
  console.log("已提交");
  submit(id).then((req) => {
    console.log(req);
    router.push("/")
  });
};
</script>
<template>
  <div id="detail">
    <nav class="fix">
      <div class="nav">
        <div class="doumi">
          <RouterLink to="/home">
            <img class="doumiIcon" src="../assets/images/doumi.jpeg" />
          </RouterLink>
          <div>北京</div>
        </div>
        <div class="btu">
          <RouterLink to="/user">
            <img class="navIcon" src="../assets/images/wode.png" />
          </RouterLink>
          <RouterLink to="/sousuo">
            <img class="navIcon" src="../assets/images/sousuo.png" />
          </RouterLink>
        </div>
      </div>
    </nav>
    <div class="product-detail">
      <h1>{{ detail.value.title }}</h1>
      <div class="p-info">
        <div class="product-price">
          <b>{{ detail.value.salary }}</b>
          {{ detail.value.salday }}
        </div>
        <div class="product-meta">
          <span class="fl">{{ detail.value.settlement }}</span>
          <span class="fl">{{ detail.value.zhiye }}</span>
          <span>{{ detail.value.peopleNum }}</span>
        </div>
      </div>
      <div class="product-topic1" v-if="detail.value.num == 0">
        <span class="iconfont icon-tubiaozhizuomoban-08"></span>
        <p>急聘职位</p>
      </div>
      <div class="product-topic2" v-else>
        <span class="iconfont icon-dunpai-"></span>
        <p>斗米自营</p>
      </div>
    </div>
    <div class="product-summary">
      <div class="mod-column-head">
        <h2>职位描述</h2>
      </div>
      <div class="mod-column-body">
        <div class="product-tag">
          <span class="tag" v-for="item in detail.value.tag" :key="item">
            {{ item }}
          </span>
        </div>
        <div class="post_detail_val">
          <p v-for="item in detail.value.describe" :key="item">{{ item }}</p>
        </div>
      </div>
      <div class="fengexian"></div>
      <div class="welfare" v-if="detail.value.welfare != 0">
        <div class="mod-column-head">
          <h2>薪资福利</h2>
        </div>
        <div class="mod-column-body" v-if="detail.value.welfare.product_tag.length != 0">
          <div class="product-tag" v-for="item in detail.value.welfare.product_tag" :key="item.name">
            <span :class="item.icon"></span>
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div class="else" v-if="detail.value.welfare.else != 0">
          <p>{{ detail.value.welfare.else }}</p>
        </div>
      </div>
    </div>
    <div class="workTime" v-if="detail.value.workTime != 0">
      <h2>工作时间</h2>
      <div class="mod-column-body">
        <div class="ttitle">
          <h1>开始时间</h1>
          <h1>结束时间</h1>
        </div>
        <el-timeline>
          <el-timeline-item :timestamp="detail.value.workTime.start.content" placement="top" type="primary"
            :hollow="true">
            <div class="timebody">
              <p v-for="item in detail.value.workTime.start.timestamp" :key="item">
                {{ item }}
              </p>
            </div>
          </el-timeline-item>
          <el-timeline-item :timestamp="detail.value.workTime.end.content" placement="top" type="primary" :hollow="true">
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <div class="workAddress">
      <h2>工作地点</h2>
      <div class="mod-column-body">
        <img src="	https://cdn.doumistatic.com//23,3ccfa9fce98a2c.jpg" alt="" />
        <div class="addr">
          <i class="iconfont icon-dingwei2"></i>
          <span>{{ detail.value.workaddr.name }}</span>
        </div>
      </div>
    </div>
    <div class="company">
      <span class="title">公司名称</span>
      <span class="name">{{ detail.value.workaddr.addr }}</span>
      <i class="iconfont icon-vip5"></i>
    </div>
    <!-- 安全提示 -->
    <div class="safety">
      <div class="title">
        <p>
          防骗警示：未标明收费的职位不会收取任何费用，若商家要求缴纳费用或押金，请提高警惕并第一时间向我们举报！
        </p>
      </div>
      <div class="fengexian"></div>
      <div class="product-welfare">
        <h2>斗米 安全提示</h2>
        <div class="product-remark">
          <p>
            1、斗米严禁用人单位做出任何损害求职者合法权益的违法违规行为，包括但不限于扣押求职者证件、收取求职者财物、向求职者集资、让求职者入股、诱导求职者异地入职、异地参与培训等，您一旦发现此类行为，请举报，举报电话:010-57977110.
          </p>
          <p style="font-size: 12px; color: rgba(159, 163, 176, 1)">
            2、了解更多职场安全防范知识 >
          </p>
        </div>
      </div>
    </div>
    <!-- 安全提示 -->
    <!-- 广告 -->
    <div class="advertising">
      <a
        href="//m.doumi.com/chaojianzhi_2017/?ca_kw=1&pn=1&dmch_from=list&item=%E5%8C%97%E4%BA%AC%3B%E5%85%A8%E9%83%A8%3B%E4%B8%8D%E9%99%90%E6%80%A7%E5%88%AB%3B%E9%9D%9E%E5%AD%A6%E7%94%9F%E5%8F%AF%E5%81%9A%3B%E6%8E%A8%E8%8D%90%E6%8E%92%E5%BA%8F?load=1">
        <img src="https://cdn.doumistatic.com/54,799c4aeaf9626a.jpg" alt="" />
      </a>
    </div>
    <!-- 广告 -->
    <div class="xx"></div>
    <div class="mod-footbar">
      <button class="btu-share">
        <span class="iconfont icon-fenxiang"></span>
        分享
      </button>
      <button class="btn-primary" @click="btu_primary">报名参加</button>
    </div>
    <el-drawer class="eldrawer" v-model="primary" direction="btt" :size="293" :with-header="false"
      :close-on-click-modal="false">
      <div class="d-body">
        <div class="d-title"></div>
        <div class="mod-popup-tips">正规兼职不会收取费用，若收费请提高警惕</div>
        <div class="fengexian" v-if="detail.value.tag.length != 0"></div>
        <div class="d-tag" v-if="detail.value.tag.length != 0">
          <h2>确定工作要求</h2>
          <div class="product-tag">
            <span class="tag" v-for="item in detail.value.tag" :key="item">
              {{ item }}
            </span>
          </div>
        </div>
        <div class="fengexian" v-if="detail.value.workTime != 0"></div>
        <div class="d-time" v-if="detail.value.workTime != 0">
          <h2>选择上班时间</h2>
          <span>({{
            detail.value.workTime.start.content +
            "~" +
            detail.value.workTime.end.content
          }})</span>
          <div class="d-time-all">
            <div v-for="item in detail.value.workTime.start.timestamp" :key="item">
              {{ item }}
            </div>
          </div>
        </div>
        <div class="fengexian"></div>
        <div class="d-addr">
          <h2>选择工作地点</h2>
          <div class="d-addr-all">
            {{ detail.value.workaddr.name }}
          </div>
        </div>
      </div>
      <div class="d-foot">
        <button class="esc" @click="quxiao">取消</button>
        <button class="primary" @click="tijiao()">极速报名</button>
      </div>
    </el-drawer>
</div>
</template>
<style lang="scss" scoped>
#detail {
  background-color: #f7f7f7;
}

.fix {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;

  .nav {
    width: 100%;
    height: 45px;
    line-height: 45px;
    background-color: white;
    display: flex;
    justify-content: space-between;

    .doumi {
      width: 150px;

      .doumiIcon {
        width: 110px;
        height: 45px;
        float: left;
      }
    }

    .btu {
      .navIcon {
        width: 27px;
        height: 27px;
        margin-top: 9px;
        float: right;
        margin-right: 15px;
      }
    }
  }
}

.product-detail {
  position: relative;
  margin-top: 44px;
  height: 132px;
  padding: 18px 20px;
  background-color: white;

  h1 {
    margin: 0;
    font-size: 22px;
    line-height: 30px;
    font-weight: bold;
  }

  .p-info {
    padding: 6px 120px 0px 0px;
    float: left;

    .product-price {
      font-size: 12px;
      color: #f60;

      b {
        margin-right: 2px;
        font-size: 24px;
        font-weight: 700;
      }
    }

    .product-meta {
      font-size: 12px;

      .fl::after {
        content: "|";
        color: #999999;
        height: 10px;
        width: 2px;
        overflow: hidden;
        margin: 5px 4px 0px 4px;
      }
    }
  }

  .product-topic1 {
    width: 50px;
    position: absolute;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
      color: #ff8266;
      font-size: 35px;
      width: 30px;
      height: 30px;
      margin-bottom: 18px;
      border-radius: 50%;
    }

    p {
      font-size: 12px;
      color: #999999;
    }
  }

  .product-topic2 {
    width: 50px;
    position: relative;
    top: 10px;
    right: -130px;
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
      color: #ffaf0f;
      background-color: #fff9eb;
      text-align: center;
      font-size: 20px;
      border: 1px solid #ffaf0f;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      line-height: 30px;
      margin-bottom: 4px;
    }

    p {
      font-size: 12px;
      color: #999999;
    }
  }
}

//代码分隔线
.product-summary {
  padding: 20px;
  margin-top: 12px;
  background-color: white;

  .mod-column-head {
    h2 {
      color: #404040;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      padding: 0 0 15px;
    }
  }

  .mod-column-body {
    margin-bottom: 40px;

    .product-tag {
      display: flex;

      .tag {
        background-color: rgba(247, 247, 247);
        color: rgba(67, 66, 68);
        font-size: 12px;
        line-height: 22px;
        padding: 2px 6px;
        margin: 12px 12px 0px 0px;
      }
    }

    .post_detail_val {
      margin-top: 12px;

      p {
        font-size: 14px;
        line-height: 22px;
        color: rgb(128, 128, 128);
      }
    }
  }

  //分割线
  .fengexian {
    border-bottom: 1px solid #f5f5f5;
  }

  //薪资福利
  .welfare {
    padding: 20px 0px;
    background-color: white;

    .mod-column-head {
      color: rgb(64, 64, 64);
    }

    .mod-column-body {
      height: 68px;
      margin: 0;
      display: flex;

      .product-tag {
        display: flex;
        margin-right: 15%;
        flex-direction: column;
        align-items: center;

        span {
          font-size: 30px;
          color: #6d6c6e;
        }

        p {
          color: #404040;
          font-size: 12px;
          line-height: 18px;
        }
      }
    }

    .else {
      p {
        background-color: rgba(229, 229, 229, 0.3);
        margin-top: 12px;
        padding: 12px;
        color: rgb(128, 128, 128);
        font-size: 14px;
      }
    }
  }
}

//代码分割线---工作时间
.workTime {
  margin-top: 12px;
  padding: 20px;
  height: 179px;
  background-color: white;

  h2 {
    color: #404040;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    padding: 0 0 15px;
  }

  .mod-column-body {
    height: 60%;
    display: flex;

    .ttitle {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      h1 {
        color: rgb(153, 153, 153);
        font-size: 14px;
        font-weight: bolder;
      }
    }

    .is-top {
      font-weight: bolder;
      color: #404040;
    }

    .el-timeline-item__content {
      .timebody {
        p {
          font-size: 12px;
          color: rgb(153, 153, 153);
        }
      }
    }
  }
}

//工作地点
.workAddress {
  padding-top: 20px;
  height: 187px;
  background-color: white;
  margin-top: 12px;

  h2 {
    color: #404040;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    padding: 0px 20px;
  }

  .mod-column-body {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    img {
      width: 100%;
      max-height: 116px;
    }

    .addr {
      position: absolute;
      top: 29%;
      height: 48px;
      padding: 0px 12px;
      z-index: 1;
      background-color: rgba(255, 255, 255, 0.9);

      i {
        font-size: 24px;
        width: 20px;
        height: 24px;
      }

      span {
        font-size: 14px;
        color: rgb(64, 64, 64);
      }
    }
  }
}

//公司名称
.company {
  margin-top: 12px;
  padding: 0px 20px;
  height: 44px;
  line-height: 34px;
  background-color: white;
  font-size: 12px;

  .title {
    color: #404040;
    margin-right: 12px;
  }

  .name {
    color: #808080;
  }

  i {
    line-height: 44px;
    font-size: 22px;
    color: #0193f0;
  }
}

//公司名称
// 安全提示
.safety {
  margin-top: 12px;
  padding: 0px 20px;
  background-color: white;

  .title {
    padding: 12px 0px;

    p {
      color: #999;
      font-size: 12px;
      line-height: 20px;
    }
  }

  .fengexian {
    border-bottom: 1px solid #f5f5f5;
  }

  .product-welfare {
    padding: 20px 0px;

    h2 {
      color: #404040;
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
    }

    .product-remark {
      padding: 12px;
      background-color: #f7f7f7;
      color: #808080;
      font-size: 14px;
      line-height: 30px;
    }
  }
}

// 安全提示
// 广告
.advertising {
  margin-top: 12px;

  img {
    max-width: 100%;
  }
}

// 广告
.xx {
  height: 50px;
}

//底部悬挂框
.mod-footbar {
  width: 100%;
  height: 50px;
  border-top: 1px solid #f3f3f3;
  position: fixed;
  bottom: 0px;
  display: flex;
  z-index: 100;

  button {
    line-height: 35px;
    border: 0;
    outline: 0;
    border-radius: 0;
  }

  .btu-share {
    width: 25%;
    background-color: #fcfcfc;
    color: #404040;

    span {
      font-size: 18px;
      color: #575758;
    }
  }

  .btn-primary {
    width: 75%;
    background-color: #ffcc00;
    color: #404040;
    font-size: 16px;
  }
}

.eldrawer {
  .d-body {
    height: 243px;

    .d-title {
      height: 33px;
      background-color: #f5f5f5;
    }

    .mod-popup-tips {
      text-align: center;
      font-size: 12px;
      color: #ffbb00;
      padding: 6px 12px;
      margin: 12px 20px 0px 20px;
      border: 1px solid #ffbb00;
    }

    .fengexian {
      margin: 0px 20px;
      border-bottom: 1px solid #f5f5f5;
    }

    .d-tag {
      padding: 12px 20px;

      h2 {
        color: #404040;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
      }

      .product-tag {
        display: flex;

        .tag {
          background-color: rgba(247, 247, 247);
          color: rgba(67, 66, 68);
          font-size: 12px;
          line-height: 22px;
          padding: 2px 6px;
          margin: 12px 12px 0px 0px;
        }
      }
    }

    .d-time {
      padding: 12px 20px;

      h2 {
        color: #404040;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        float: left;
      }

      span {
        color: #999999;
        font-size: 14px;
        margin-left: 18px;
      }

      .d-time-all {
        margin-top: 10px;

        div {
          font-size: 14px;
          color: #808080;
        }
      }
    }

    .d-addr {
      padding: 12px 20px;

      h2 {
        color: #404040;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        float: left;
      }

      span {
        color: #999999;
        font-size: 14px;
        margin-left: 18px;
      }

      .d-addr-all {
        margin-top: 30px;
        font-size: 14px;
        color: #808080;
      }
    }
  }

  .d-foot {
    height: 50px;
    border-top: 1px solid #f5f5f5;

    * {
      height: 100%;
      width: 50%;
      border: 0;
      font-size: 16px;
    }

    .esc {
      background-color: #ffffff;
      color: rgb(128, 128, 128);
    }

    .primary {
      background-color: #ffcc00;
      color: #404040;
    }
  }
}
</style>
<style lang="scss">
.eldrawer {
  .el-drawer__body {
    padding: 0;
  }
}
</style>
